import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { PageHeader, Button } from 'antd';
import MyLoadable from 'components/MyLoadable';
import { pushUrl } from 'actions/router';
import './style.scss';

class Home extends React.PureComponent {
  static propTypes = {
    msg: PropTypes.string.isRequired,
    pushUrl: PropTypes.func.isRequired,
  };

  state = {
    showLogin: false,
  };

  handleLogin = (bool) => {
    if (bool) {
      this.LoadableLogin = MyLoadable({
        loader: () => import(/* webpackChunkName: 'login' */ './Login'),
      });
    }
    this.setState({ showLogin: bool });
  }

  render() {
    const { LoadableLogin, handleLogin } = this;
    const { showLogin } = this.state;

    return (
      <div className="home-container">
        <PageHeader title="Home" subTitle={this.props.msg} backIcon={false} />
        <Button
          type="primary"
          onClick={() => handleLogin(true)}
        >
          login
        </Button>
        <Button
          onClick={() => this.props.pushUrl('/about')}
        >
          to about
        </Button>
        {LoadableLogin && (
        <LoadableLogin
          visible={showLogin}
          onOk={() => handleLogin(false)}
          onCancel={() => handleLogin(false)}
        />
        )}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  msg: state.home.msg,
});

const mapDispatchToProps = dispatch => ({
  pushUrl: url => dispatch(pushUrl(url)),
});

export default connect(mapStateToProps, mapDispatchToProps)(Home);
